<style lang="less">
@import "index.less";
</style>
<style scoped>
.input {
  display: inline-block;
  width: 300px;
}
@media screen and (max-width: 960px) {
}
</style>

<template>
  <div>
    <Card>
      <p slot="title">
        <Icon type="md-person"></Icon>个人信息
      </p>
      <div>
        <Form ref="myForm" :rules="ruleValidate" :model="formItem" :label-width="80">
          <FormItem label="用户账号" prop="username">
            <div class="input" style>
              <Input v-model="username" disabled></Input>
            </div>
          </FormItem>
          <FormItem label="用户昵称" prop="nickname">
            <div class="input">
              <Input v-model="formItem.nickname"></Input>
            </div>
          </FormItem>
          <FormItem label="用户头像" prop="headImg">
            <div class="demo-upload-list" v-if="formItem.headImg">
              <img :src="formItem.headImg">
              <div class="demo-upload-list-cover">
                <Icon type="ios-trash-outline" @click.native="handleImgRemove()"></Icon>
              </div>
            </div>
            <input v-if="formItem.headImg" v-model="formItem.headImg" type="hidden" name="image">
            <Upload
              type="drag"
              :action="uploadUrl"
              :headers="uploadHeader"
              v-if="!formItem.headImg"
              :format="['jpg','jpeg','png']"
              :max-size="5120"
              :on-success="handleImgSuccess"
              :on-format-error="handleImgFormatError"
              :on-exceeded-size="handleImgMaxSize"
              style="display: inline-block;width:58px;"
            >
              <div style="width: 58px;height:58px;line-height: 58px;">
                <Icon type="ios-camera" size="20"></Icon>
              </div>
            </Upload>
          </FormItem>
          <FormItem label="原密码" prop="oldPassword">
            <div class="input">
              <Input
                type="password"
                v-model="formItem.oldPassword"
                placeholder="请输入现在使用的密码，如需修改密码则必填"
              ></Input>
            </div>
          </FormItem>
          <FormItem label="新密码" prop="password">
            <div class="input">
              <Input type="password" v-model="formItem.password" placeholder="请输入新密码，至少6位字符"></Input>
            </div>
          </FormItem>
          <FormItem label="确认新密码" prop="rePassword">
            <div class="input">
              <Input type="password" v-model="rePassword" placeholder="请再次输入新密码"></Input>
            </div>
          </FormItem>
          <div>
            <Button type="text" style="width: 100px;" @click="cancel">取消</Button>
            <Button
              type="primary"
              style="width: 100px;"
              :loading="saveLoading"
              @click="confirmSubmit"
            >保存</Button>
          </div>
        </Form>
      </div>
    </Card>
    <Modal v-model="confirmSub" width="360">
      <p slot="header" style="color:#f60;text-align:center">
        <Icon type="md-information-circle"></Icon>
        <span>确定要提交么</span>
      </p>
      <div style="text-align:center">
        <p>个人信息修改后，将会退出系统重新登录，请明确后修改！</p>
      </div>
      <div slot="footer">
        <Button type="error" size="large" long @click="submit">确定修改</Button>
      </div>
    </Modal>
  </div>
</template>

<script>
import config from "../../../build/config";
import axios from "axios";

export default {
  name: "own_index",
  data() {
    const checkPassword = (rule, value, callback) => {
      let password = this.formItem.password;
      if (password !== this.rePassword) {
        callback(new Error("两次输入密码不一致"));
      } else {
        callback();
      }
    };
    const checkOldPassword = (rule, value, callback) => {
      let password = this.formItem.password;
      if (password) {
        if (!this.formItem.oldPassword) {
          callback(new Error("初始密码不得为空"));
        } else {
          callback();
        }
      } else {
        callback();
      }
    };
    return {
      confirmSub: false,
      uploadUrl: "",
      uploadHeader: {},
      saveLoading: false,
      rePassword: "",
      username: "",
      formItem: {
        nickname: "",
        headImg: "",
        oldPassword: "",
        password: ""
      },
      ruleValidate: {
        nickname: [{ required: true, message: "请输入姓名", trigger: "blur" }],
        password: [
          { min: 6, message: "请至少输入6个字符", trigger: "blur" },
          { max: 32, message: "最多输入32个字符", trigger: "blur" }
        ],
        rePassword: [{ validator: checkPassword, trigger: "blur" }],
        oldPassword: [{ validator: checkOldPassword, trigger: "blur" }]
      }
    };
  },
  methods: {
    cancel() {
      this.$store.commit("removeTag", "own_index");
      localStorage.pageOpenedList = JSON.stringify(
        this.$store.state.app.pageOpenedList
      );
      let lastPageName = "";
      if (this.$store.state.app.pageOpenedList.length > 1) {
        lastPageName = this.$store.state.app.pageOpenedList[1].name;
      } else {
        lastPageName = this.$store.state.app.pageOpenedList[0].name;
      }
      this.$router.push({
        name: lastPageName
      });
    },
    confirmSubmit() {
      this.confirmSub = true;
    },
    submit() {
      let vm = this;
      this.$refs["myForm"].validate(valid => {
        if (valid) {
          vm.saveLoading = true;
          axios.post("User/own", vm.formItem).then(function(response) {
            if (response.data.code === 1) {
              vm.$Message.success(response.data.msg);
              vm.$store.commit("logout", vm);
              vm.$router.push({
                name: "login"
              });
            } else {
              if (response.data.code === -14) {
                vm.$store.commit("logout", vm);
                vm.$router.push({
                  name: "login"
                });
              } else {
                vm.$Message.error(response.data.msg);
              }
            }
            vm.saveLoading = false;
          });
        }
      });
    },
    init() {
      let userInfo = JSON.parse(sessionStorage.getItem("userInfo"));
      this.username = userInfo.username;
      this.formItem.nickname = userInfo.nickname;
      this.formItem.headImg = userInfo.headImg;
      this.uploadUrl = config.baseUrl + "Index/upload";
      this.uploadHeader = { ApiAuth: sessionStorage.getItem("apiAuth") };
    },
    handleImgFormatError(file) {
      this.$Notice.warning({
        title: "文件类型不合法",
        desc: file.name + "的文件类型不正确，请上传jpg或者png图片。"
      });
    },
    handleImgRemove() {
      this.formItem.headImg = "";
    },
    handleImgSuccess(response) {
      if (response.code === 1) {
        this.$Message.success(response.msg);
        this.formItem.headImg = response.data.fileUrl;
      } else {
        this.$Message.error(response.msg);
      }
    },
    handleImgMaxSize(file) {
      this.$Notice.warning({
        title: "文件大小不合法",
        desc: file.name + "太大啦请上传小于5M的文件。"
      });
    }
  },
  mounted() {
    this.init();
  }
};
</script>
